<template>
  <div id="matr-top10">
    <div class="div_left" style="width: 40%">
      <div class="matr-top10-title">耗材品种消耗TOP10</div>
      <dv-charts :option="option" v-show="!showNoRecord"/>
    </div>
    <div class="div_left" style="width: 60%;margin-left: -30px;white-space: nowrap;" v-show="!showNoRecord">
      <ul>
        <li v-for="(item, index) in matrUse" :key="item" :style="{'font-size':index < 3 ? '18px': '15px'}">
            {{item.matrResult}}%  {{item.name}}({{item.value}})
        </li>
      </ul>
    </div>
    <div class="div_left" style="width: 60%;margin-top: 10%;font-size: 20px;" v-show="showNoRecord">
        本月暂无消耗数据
    </div>
  </div>
</template>

<script>
export default {
  name: 'MatrTop10',
  data() {
    return {
      option: {},
      colors: ['#01AAED', '#FF5722', '#009688', '#5FB878', '#FFA500', '#fa3600', '#FFD700', '#4682B4', '#F08080', '#FFB800'],
      matrUse: [],
      showNoRecord: false
    }
  },
  methods: {
    async createData() {
      let matrResult = 0
      await this.$ajax.get('/finance/bill/findThisMonthMaterialUse').then(resp => {
        if (resp.code != 0) {
          global.utilMessage.alertFail(`获取本月耗材消耗发生错误：${resp.msg}`)
          return
        }
        if (resp.data.length > 0) {
          this.showNoRecord = false
          this.matrUse = []
          resp.data.forEach(o => matrResult += o.skuQty)
          resp.data.forEach((item) => {
            let matr = {
              name: item.matrName,
              value: item.skuQty,
              matrResult: (item.skuQty / matrResult * 100).toFixed(2)

            }
            this.matrUse.push(matr)
          })
          this.matrUse = this.matrUse.sort((m1, m2) => m2.matrResult - m1.matrResult)
          this.option = {
            series: [
              {
                type: 'pie',
                radius: '100%',
                data: this.matrUse,
                //是否显示内部标签
                insideLabel: {
                  show: false
                },
                //外部标签
                outsideLabel: {
                  show: false,
                  // formatter: '{name} {value} {percent}%',
                  // formatter: (dataItem) => (dataItem.name + ' ' + dataItem.value + ' (' + dataItem.matrResult + ')'),
                  // labelLineEndLength: 20,
                  // style: {
                  //   fill: '#fff'
                  // },
                  // //饼图指示线样式
                  // labelLineStyle: {
                  //   stroke: '#fff'
                  // }
                },
              }
            ],
            color: this.colors
          }
        } else {
          this.showNoRecord = true
        }
      })
    }
  },
  mounted() {
    const { createData } = this

    createData()

    setInterval(createData, 1800000)
  }
}
</script>

<style lang="scss">
#matr-top10 {
  width: 100%;
  height: 30%;
  margin-bottom: 10px;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, .5);
  box-sizing: border-box;

  .matr-top10-title {
    height: 20%;
    font-weight: bold;
    text-indent: 20px;
    font-size: 20px;
    display: flex;
    align-items: center;
  }

  .div_left {
    float:left;
    height: 80%;
  }

  ul li {
    list-style-type: square;
  }
}
</style>
